<div class="bg-white px-8 py-3 border-b border-gray-200 shadow-sm w-full flex items-center justify-between gap-5 h-15 flex-shrink-0">
    <div class="header-left">
        <h1 class="text-2xl text-slate-700 m-0">{% block page_title %}博客管理后台{% endblock %}</h1>
    </div>
    
    <div class="header-center flex-1 max-w-md mx-5">
        <div class="relative flex items-center">
            <input type="text" placeholder="搜索文章、评论..." class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-full text-base outline-none transition-colors duration-300 focus:border-blue-500">
            <button class="absolute right-2 bg-blue-500 border-0 text-white w-9 h-9 rounded-full cursor-pointer flex items-center justify-center transition-colors duration-300 text-base hover:bg-blue-600">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
    
    <div class="header-right flex items-center">
        <div class="flex items-center gap-2">
            <!-- 邮箱通知 -->
            <div class="relative cursor-pointer p-2 rounded-full transition-colors duration-300 hover:bg-gray-100">
                <i class="fas fa-envelope text-lg text-gray-600"></i>
                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full min-w-4 text-center leading-none">3</span>
            </div>
            
            <!-- 闹铃通知 -->
            <div class="relative cursor-pointer p-2 rounded-full transition-colors duration-300 hover:bg-gray-100">
                <i class="fas fa-bell text-lg text-gray-600"></i>
                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full min-w-4 text-center leading-none">5</span>
            </div>
            
            <!-- 用户头像和菜单 -->
            <div class="flex items-center gap-2.5 px-2.5 py-1 rounded-full cursor-pointer transition-colors duration-300 hover:bg-gray-100">
                <div class="w-10 h-10 rounded-full overflow-hidden bg-blue-500 flex items-center justify-center text-white text-lg">
                    {% if current_user.avatar %}
                        <img src="{{ current_user.avatar }}" alt="头像" class="w-full h-full object-cover">
                    {% else %}
                        <i class="fas fa-user"></i>
                    {% endif %}
                </div>
                <div class="flex flex-col items-start">
                    <span class="font-semibold text-gray-800 text-sm">{{ current_user.name or current_user.username }}</span>
                    <span class="text-xs text-gray-600">管理员</span>
                </div>
            </div>
        </div>
    </div>
    
    {% block header_actions %}{% endblock %}
</div>
